import 'package:flutter/material.dart';

// lib/pages/innovation_activity_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:portal_website/pages/common_header.dart';
import 'package:portal_website/tool/color_util.dart';

class DoubleActivityPage extends StatefulWidget {
  const DoubleActivityPage({super.key});

  @override
  State<DoubleActivityPage> createState() => _DoubleActivityPageState();
}

class _DoubleActivityPageState extends State<DoubleActivityPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late List<Animation<double>> _animations;

  final List<Map<String, dynamic>> _activities = [
    {
      'name': '创新创业大赛',
      'type': '比赛竞技',
      'description': '面向全市创新创业者的大型比赛，提供展示平台和丰厚奖金，助力优秀项目落地孵化。',
      'stats': {'参与团队': '200+', '获奖项目': '15个'}
    },
    {
      'name': '创业导师讲座',
      'type': '培训讲座',
      'description': '邀请行业专家和成功企业家分享创业经验，提供一对一咨询指导服务。',
      'stats': {'参与人数': '300+', '导师数量': '8位'}
    },
    {
      'name': '项目路演对接会',
      'type': '交流对接',
      'description': '为优质项目和投资机构搭建沟通桥梁，促进项目融资和资源整合。',
      'stats': {'路演项目': '30个', '投资机构': '20家'}
    },
  ];

  final List<Map<String, dynamic>> _timelineItems = [
    {
      'date': '2023-03-15',
      'title': '年度创新创业大赛启动',
      'content': '本届大赛设置多个赛道，总奖金池达100万元，报名截止日期为5月30日。'
    },
    {
      'date': '2023-04-20',
      'title': '首期创业导师培训营',
      'content': '围绕商业模式设计、市场拓展等主题开展为期3天的封闭式培训。'
    },
    {
      'date': '2023-06-10',
      'title': '项目路演对接会',
      'content': '精选20个优质项目进行现场路演，邀请多家知名投资机构参与对接。'
    },
    {
      'date': '2023-07-05',
      'title': '创新创业成果展',
      'content': '展示示范区近年来优秀创新创业成果，搭建交流合作平台。'
    },
  ];

  final List<Map<String, dynamic>> _features = [
    {
      'icon': '🏆',
      'title': '项目展示',
      'description': '为创业项目提供展示平台，让更多人了解项目价值和发展潜力。'
    },
    {
      'icon': '👨‍',
      'title': '资金对接',
      'description': '连接创业项目和投资机构，促进资本与项目的精准对接。'
    },
    {
      'icon': '👨‍🏫',
      'title': '资源整合',
      'description': '整合政府、企业、高校等资源，为创业者提供全方位支持。'
    },
    {'icon': '👨‍🏫', 'title': '培训讲座', 'description': '邀请行业专家开展培训，提升创业者技能和素养'},
    {'icon': '🤝', 'title': '交流对接', 'description': '搭建项目与资本、市场对接平台，促进资源整合'},
    {'icon': '📅', 'title': '定期举办', 'description': '形成常态化活动机制，每月至少开展2-3场主题活动'},
  ];

  @override
  void initState() {
    super.initState();
    // 页面加载动画
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1000),
    );

    _animations = List.generate(4, (index) {
      return Tween<double>(begin: 0, end: 1).animate(
        CurvedAnimation(
          parent: _animationController,
          curve: Interval(0.1 * index, 1.0, curve: Curves.easeOut),
        ),
      );
    });

    // 延迟启动动画，模拟页面加载
    Future.delayed(const Duration(milliseconds: 100), () {
      _animationController.forward();
    });
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (context, child) {
        return Opacity(
          opacity: _animations[0].value,
          child: Transform.translate(
            offset: Offset(0, 30 * (1 - _animations[0].value)),
            child: child,
          ),
        );
      },
      child: Container(
        constraints: const BoxConstraints(maxWidth: 1200),
        // padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            const PageHeader(
              title: '双创活动',
              subtitle: '丰富多样的创新创业活动，助力梦想启航',
              description:
                  '我们定期举办各类创新创业活动，包括大赛、讲座、路演等，为创业者提供展示、交流、学习的平台，促进资源对接与合作，营造良好的创新创业生态。',
            ),

            // 近期活动区域
            AnimatedBuilder(
              animation: _animationController,
              builder: (context, child) {
                return Opacity(
                  opacity: _animations[1].value,
                  child: Transform.translate(
                    offset: Offset(0, 30 * (1 - _animations[1].value)),
                    child: child,
                  ),
                );
              },
              child: ContentDoubleSection(
                title: '正在进行活动',
                subtitle: 'Ongoing Activities',
                content: GridView.count(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  crossAxisCount:
                      MediaQuery.of(context).size.width > 768 ? 3 : 1,
                  crossAxisSpacing: 30,
                  mainAxisSpacing: 30,
                  childAspectRatio: 1.0,
                  children: _activities
                      .map((activity) => _buildActivityCard(activity))
                      .toList(),
                ),
              ),
            ),

            // 活动时间轴
            AnimatedBuilder(
              animation: _animationController,
              builder: (context, child) {
                return Opacity(
                  opacity: _animations[2].value,
                  child: Transform.translate(
                    offset: Offset(0, 30 * (1 - _animations[2].value)),
                    child: child,
                  ),
                );
              },
              child: ContentDoubleSection(
                title: '往期精彩活动',
                subtitle: 'Past Activities',
                content: _buildTimeline(),
              ),
            ),

            // 特色功能
            AnimatedBuilder(
              animation: _animationController,
              builder: (context, child) {
                return Opacity(
                  opacity: _animations[3].value,
                  child: Transform.translate(
                    offset: Offset(0, 30 * (1 - _animations[3].value)),
                    child: child,
                  ),
                );
              },
              child: ContentDoubleSection(
                title: '活动特色',
                subtitle: 'Activity Features',
                content: GridView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                      maxCrossAxisExtent: 350,
                      crossAxisSpacing: 25,
                      mainAxisExtent: 220,
                      mainAxisSpacing: 25),
                  itemBuilder: (BuildContext context, int index) {
                    Map feature = _features[index];
                    return FeatureItem(
                      icon: feature['icon'],
                      title: feature['title'],
                      description: feature['description'],
                    );
                  },
                  itemCount: _features.length,
                  // childAspectRatio: 1.0,
                ),
              ),
            ),

            // 活动报名
            AnimatedBuilder(
              animation: _animationController,
              builder: (context, child) {
                return Opacity(
                  opacity: _animations[3].value,
                  child: Transform.translate(
                    offset: Offset(0, 30 * (1 - _animations[3].value)),
                    child: child,
                  ),
                );
              },
              child: ContentDoubleSection(
                title: '活动报名',
                subtitle: 'Activity Registration',
                content: _buildRegistrationForm(),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildActivityCard(Map<String, dynamic> activity) {
    return MouseRegion(
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(color: const Color(0xFFe1e8ed)),
          borderRadius: BorderRadius.circular(12),
          boxShadow: const [
            BoxShadow(
              color: Colors.black12,
              blurRadius: 15,
              offset: Offset(0, 3),
            )
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: 120,
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: [Color(0xFF4facfe), Color(0xFF00f2fe)],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                borderRadius: BorderRadius.vertical(
                  top: Radius.circular(12),
                ),
              ),
              child: const Center(
                child: Text(
                  '📅',
                  style: TextStyle(fontSize: 48, color: Colors.white),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(25),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    activity['name'],
                    style: const TextStyle(
                      fontSize: 20,
                      color: Color(0xFF1e3c72),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(bottom: 15, top: 12),
                    padding:
                        const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        colors: [Color(0xFF4facfe), Color(0xFF00f2fe)],
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                    ),
                    child: Text(
                      activity['type'],
                      style: const TextStyle(
                        fontSize: 12,
                        color: Colors.white,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                  Text(
                    activity['description'],
                    style: const TextStyle(
                      color: Color(0xFF666666),
                      height: 1.7,
                    ),
                  ),
                  SizedBox(
                    height: 15,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        activity['stats'].entries.first.key +
                            '：' +
                            activity['stats'].entries.first.value,
                        style: const TextStyle(
                          fontSize: 13,
                          color: Color(0xFF888888),
                        ),
                      ),
                      Text(
                        activity['stats'].entries.last.key +
                            '：' +
                            activity['stats'].entries.last.value,
                        style: const TextStyle(
                          fontSize: 13,
                          color: Color(0xFF888888),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTimeline() {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 20),
      child: Column(
        children: List.generate(_timelineItems.length, (index) {
          final isLeft = index % 2 == 0;
          return _buildTimelineItem(
            _timelineItems[index],
            isLeft,
            index,
          );
        }),
      ),
    );
  }

  Widget _buildTimelineItem(Map<String, dynamic> item, bool isLeft, int index) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 20),
      child: Row(
        children: [
          if (isLeft)
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Container(
                    padding: const EdgeInsets.all(20),
                    margin: const EdgeInsets.only(right: 40),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(6),
                      boxShadow: const [
                        BoxShadow(
                          color: Colors.black12,
                          blurRadius: 15,
                          offset: Offset(0, 3),
                        )
                      ],
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Text(
                          item['date'],
                          style: const TextStyle(
                            color: Color(0xFF4facfe),
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        const SizedBox(height: 10),
                        Text(
                          item['title'],
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 16,
                          ),
                        ),
                        const SizedBox(height: 5),
                        Text(
                          item['content'],
                          style: const TextStyle(
                            color: Color(0xFF666666),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          // 时间轴中点
          Container(
            width: 25,
            height: 25,
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: const Color(0xFF4facfe), width: 4),
              borderRadius: BorderRadius.circular(50),
            ),
            // zIndex: 1,
          ),
          // 时间轴线
          if (index != _timelineItems.length - 1)
            Container(
              width: 1,
              height: 60,
              color: const Color(0xFF4facfe),
              margin: const EdgeInsets.symmetric(vertical: 0),
            ),
          if (!isLeft)
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    padding: const EdgeInsets.all(20),
                    margin: const EdgeInsets.only(left: 40),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(6),
                      boxShadow: const [
                        BoxShadow(
                          color: Colors.black12,
                          blurRadius: 15,
                          offset: Offset(0, 3),
                        )
                      ],
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          item['date'],
                          style: const TextStyle(
                            color: Color(0xFF4facfe),
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        const SizedBox(height: 10),
                        Text(
                          item['title'],
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 16,
                          ),
                        ),
                        const SizedBox(height: 5),
                        Text(
                          item['content'],
                          style: const TextStyle(
                            color: Color(0xFF666666),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
        ],
      ),
    );
  }

  Widget _buildRegistrationForm() {
    return Container(
      padding: EdgeInsets.all(40),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: ColorsUtil.colorF0F8FF,
      ),
      child: Column(
        children: [
          const Text(
            '想要参加我们的双创活动？请填写以下信息进行报名：',
            style: TextStyle(
              fontSize: 16,
              color: Color(0xFF555555),
            ),
          ),
          SizedBox(
            height: 20,
          ),
          Container(
            margin: EdgeInsets.only(left: 80, right: 80),
            child: Form(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  _buildFormField('姓名'),
                  const SizedBox(height: 15),
                  _buildFormField('联系电话'),
                  const SizedBox(height: 15),
                  _buildFormField('电子邮箱'),
                  const SizedBox(height: 15),
                  _buildFormField('所属单位'),
                  const SizedBox(height: 15),
                  _buildFormField('意向活动', isDropdown: true),
                  const SizedBox(height: 15),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        '项目简介',
                        style: TextStyle(
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      SizedBox(
                        height: 8,
                      ),
                      TextFormField(
                        maxLines: 4,
                        decoration: InputDecoration(
                          filled: true,
                          fillColor: Colors.white,
                          hintStyle: TextStyle(
                              fontSize: 16, color: ColorsUtil.color999999),
                          disabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(6),
                            borderSide:
                                const BorderSide(color: Color(0xFFdddddd)),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(6),
                            borderSide:
                                const BorderSide(color: Color(0xFFdddddd)),
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(6),
                            borderSide:
                                const BorderSide(color: Color(0xFFdddddd)),
                          ),
                          hintText: '请简要介绍您的项目',
                          contentPadding: const EdgeInsets.all(12),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 20),
                  Center(
                    child: ElevatedButton(
                      onPressed: () {},
                      style: ElevatedButton.styleFrom(
                        backgroundColor: const Color(0xFF4facfe),
                        padding: const EdgeInsets.symmetric(
                            horizontal: 30, vertical: 12),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(30),
                        ),
                        elevation: 0,
                      ),
                      child: const Text(
                        '提交报名',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFormField(String label, {bool isDropdown = false}) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Text(
        //   label,
        //   style: const TextStyle(
        //     fontWeight: FontWeight.w500,
        //   ),
        // ),
        // SizedBox(
        //   height: 8,
        // ),
        isDropdown
            ? DropdownButtonFormField<String>(
                decoration: InputDecoration(
                  filled: true,
                  hintText: "请选择活动类型",
                  hoverColor: Colors.white,
                  fillColor: Colors.white,
                  focusColor: Colors.blue,
                  hintStyle:
                      TextStyle(fontSize: 16, color: ColorsUtil.color999999),
                  disabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(6),
                    borderSide: const BorderSide(color: Color(0xFFdddddd)),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(6),
                    borderSide: const BorderSide(color: Color(0xFFdddddd)),
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(6),
                    borderSide: const BorderSide(color: Color(0xFFdddddd)),
                  ),
                  contentPadding:
                      const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
                ),
                items: const [
                  DropdownMenuItem(
                    value: 'competition',
                    child: Text('创新创业大赛'),
                  ),
                  DropdownMenuItem(
                    value: 'lecture',
                    child: Text('创业导师讲座'),
                  ),
                  DropdownMenuItem(
                    value: 'roadshow',
                    child: Text('项目路演对接会'),
                  ),
                ],
                onChanged: (value) {},
              )
            : TextFormField(
                cursorColor: Colors.red,
                decoration: InputDecoration(
                  hintText: label,
                  filled: true,
                  hoverColor: Colors.white,
                  fillColor: Colors.white,
                  focusColor: Colors.blue,
                  hintStyle:
                      TextStyle(fontSize: 16, color: ColorsUtil.color999999),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(6),
                    borderSide: const BorderSide(color: Color(0xFFdddddd)),
                  ),
                  disabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(6),
                    borderSide: const BorderSide(color: Color(0xFFdddddd)),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(6),
                    borderSide: const BorderSide(color: Color(0xFFdddddd)),
                  ),
                  contentPadding:
                      const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
                ),
              ),
      ],
    );
  }
}
